<template>
  <div>
    <el-dialog
        title="打印"
        v-model="openFlag"
        width="50%"
    >

      <div>

        <div class="search-bar">
          <select v-model="statusFilter" @change="search">
            <option value="">全部状态</option>
            <option value="已完成">已完成</option>
            <option value="已驳回">已驳回</option>
            <option value="待审核">待审核</option>

          </select>
          <input v-model="searchContent" placeholder="搜索内容" />
          <button @click="search">搜索</button>
          <button @click="reset">重置</button>

        </div>

        <table>
          <thead>
          <tr>
            <th>单据编号</th>
            <th>调出数量</th>
            <th>调出公司</th>
            <th>调出管理员</th>
            <th>调出时间</th>
            <th>调出说明</th>
            <th>调入公司</th>
            <th>调入管理员</th>
            <th>调入时间</th>
            <th>调入位置</th>
            <th>调入说明</th>
            <th>创建人</th>
            <th>操作人</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in filteredData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.outCompany }}</td>
            <td>{{ item.outAdmin }}</td>
            <td>{{ item.outTime }}</td>
            <td>{{ item.outDesc }}</td>
            <td>{{ item.inCompany }}</td>
            <td>{{ item.inAdmin }}</td>
            <td>{{ item.inTime }}</td>
            <td>{{ item.inPosition }}</td>
            <td>{{ item.inDesc }}</td>
            <td>{{ item.creator }}</td>
            <td>{{ item.operator }}</td>
            <td>{{ item.status }}</td>
          </tr>
          </tbody>
        </table>


        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
          <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
          <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
        </div>
      </div>
    </el-dialog>
  </div>

  </template>
  
  <script setup>

  const openFlag = ref(false);

  const data = [
    // ... 数据列表
    // 示例数据
    {
      id: 'ZCDB2024062600001',
      quantity: 1,
      outCompany: '欧科华创',
      outAdmin: '欧科',
      outTime: '2024-06-26',
      outDesc: '-',
      inCompany: '欧科华创',
      inAdmin: '欧科',
      inTime: '2024-06-26',
      inPosition: '-',
      inDesc: '-',
      creator: '欧科',
      operator: '欧科',
      status: '已完成',
    },

  ];
  const searchContent = ref('');
  const statusFilter = ref('');
  const currentPage = ref(1);
  const pageSize = 20;

  const filteredData = computed(() => {
    const filtered = data.filter(item =>
        item.id.includes(searchContent.value) &&
        (!statusFilter.value || item.status === statusFilter.value)
    );
    const start = (currentPage.value - 1) * pageSize;
    const end = start + pageSize;
    return filtered.slice(start, end);
  });

  const totalPages = computed(() => {
    return Math.ceil(data.length / pageSize);
  });

  function search() {
    currentPage.value = 1;
  }

  function reset() {
    searchContent.value = '';
    statusFilter.value = '';
    currentPage.value = 1;
  }

  function prevPage() {
    if (currentPage.value > 1) {
      currentPage.value--;
    }
  }

  function nextPage() {
    if (currentPage.value < totalPages.value) {
      currentPage.value++;
    }
  }

  function open() {
    openFlag.value = true;
  }

  function close() {
    openFlag.value = false;
  }

  defineExpose({
    open
  })
  </script>
  
  <style>

  .search-bar {
    margin-bottom: 10px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  
  .pagination {
    margin-top: 10px;
  }
  .search-bar{
    float: left;
  }
  </style>